<script setup lang="ts">
import bg from 'src/assets/enter-competition/c4.webp'

// import bigPrize from 'src/assets/enter-competition/bigPrize.png'
import cup from 'src/assets/enter-competition/ABUIABAEGAAgl5XRowYokKiplQcw8QQ4ggQ!600x600.png.webp'
import { awardImg } from '~/api'

// import no0 from 'src/assets/enter-competition/td.png'
// import no1 from 'src/assets/enter-competition/er.png'
// import no2 from 'src/assets/enter-competition/yi.png'

const { basicInfo } = storeToRefs(useTeamInfoStore())
const bigPrize = ref('')
const bigAPPPrize = ref('')
awardImg({ scheduleId: basicInfo.value.scheduleId, type: 'PC' }).then((res) => {
  bigPrize.value = getAssetUrl(res.data.imgVo?.fileUrl)
})
awardImg({ scheduleId: basicInfo.value.scheduleId, type: 'APP' }).then((res) => {
  bigAPPPrize.value = getAssetUrl(res.data.imgVo?.fileUrl)
})
</script>

<template>
  <PageItem :bg="bg" title="奖项设置" :title-style="{ marginBottom: '4vw' }">
    <div h-full grid="~ cols-1 gap-4vw items-center" lt-lg="mt-50px">
      <div lt-lg:hidden>
        <img :src="bigPrize" class="w-full object-contain">
      </div>
      <div lg:hidden>
        <img :src="bigAPPPrize" class="w-full object-contain">
      </div>
      <!-- <div v-if="awardsArr.length" grid="~ cols-3 items-center gap-4" font="bold">
        <div grid="col-span-3" class="relative">
          <img w-full object="cover" :src="no0">
          <div class="td-temp-style">
            <div>{{ awardsArr[0].awardName }}</div>
            <div>{{ awardsArr[2].awardContent }}<div>元 / 个</div></div>
            <div>共{{ awardsArr[0].awardSum }}名</div>
          </div>
        </div>
        <div class="relative">
          <img w-full object="cover" :src="no2">
          <div class="divwidth100 qt-temp-style flex-wrap">
            <div>{{ awardsArr[2].awardName }}</div>
            <div>{{ awardsArr[2].awardContent }}<div>元 / 个</div></div>
            <div>共{{ awardsArr[2].awardSum }}名</div>
          </div>
        </div>
        <div class="relative">
          <img w-full object="cover" :src="no1">
          <div class="divwidth100 qt-temp-style flex-wrap">
            <div>{{ awardsArr[1].awardName }}</div>
            <div>{{ awardsArr[1].awardContent }}<div>元 / 个</div></div>
            <div>共{{ awardsArr[1].awardSum }}名</div>
          </div>
        </div>
        <div class="relative">
          <img w-full object="cover" :src="no2">
          <div class="divwidth100 qt-temp-style flex-wrap">
            <div>{{ awardsArr[3].awardName }}</div>
            <div>{{ awardsArr[3].awardContent }}<div>元 / 个</div></div>
            <div>共{{ awardsArr[3].awardSum }}名</div>
          </div>
        </div>
        <div grid="col-span-3" class="relative">
          <img w-full object="cover" :src="no0">
          <div class="td-temp-style">
            <div>{{ awardsArr[4].awardName }}</div>
            <div style="font-size:1vw">
              {{ awardsArr[4].awardContent }}
            </div>
            <div>若干名</div>
          </div>
        </div>
      </div> -->
      <!-- <div>
        <img :src="cup" class="w-full object-contain">
      </div> -->
    </div>
  </PageItem>
</template>

<style scoped>
.td-temp-style{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.qt-temp-style{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  left: 0;
  display: flex;
  justify-content: space-between;
}

.td-temp-style>div:nth-child(1),.td-temp-style>div:nth-child(3){
  font-size: 1.4vw;
  color: #fff;
  width: 20%;
  text-align: center;
}
.td-temp-style>div:nth-child(2){
  display: flex;
  font-size: 6vh;
  color: #631E8E;
  width: 40%;
  justify-content: center;
  align-items: center;
}
.td-temp-style>div>div{
  margin-left: 10px;
  font-size: 1vw;
  display: flex;
  align-items: end;
  width: 15px;
  justify-content: center;
}

.qt-temp-style>div:nth-child(1){
  font-size: 1.4vw;
  color: #fff;
  text-align: center;
  padding-top: 5%;
}
.qt-temp-style>div:nth-child(3){
  font-size: 0.9vw;
  color: #fff;
  text-align: center;
  padding-bottom: 4%;

}
.qt-temp-style>div:nth-child(2){
  display: flex;
  font-size: 3vh;
  color: #631E8E;
  justify-content: center;
  align-items: center;
}
.qt-temp-style>div>div{
  margin-left: 10px;
  text-align: center;
  font-size: 1vw;
  /* writing-mode: vertical-rl; */
  width: 15px;
}
.divwidth100>div:nth-child(1){
  width: 100%;
  display: flex;
  align-items: start;
  justify-content: center;
}
.divwidth100>div:nth-child(2){
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.divwidth100>div:nth-child(3){
  width: 100%;
  display: flex;
  align-items: end;
  justify-content: center;
}
</style>
